<template>
        <div class="photo-player">
            <ul class="photo-player-lists">
                <transition-group name="slide-fade">
                    <li v-for="(value, key) in bannerList" :key="key" v-show="key === index"><img :src="value" /></li>
                </transition-group>
            </ul>
        </div>
</template>

<script>
export default {
    data(){
        return {
            index: 0
        }
    },
    props: ["bannerList"],
    methods: {
        change(){
            let that = this;
            let len = this.bannerList.length;
            setInterval(function(){
                that.index++;
                if(that.index == len){
                    that.index = 0;
                }

            }, 1000*5);
        }
    },
    mounted(){
        this.change();
    }
}
</script>

<style scoped>
html, body{
    margin: 0;
    padding: 0;
}
.photo-player{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.photo-player-lists{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
}
.photo-player-lists span{width: inherit;height: inherit;}
.photo-player-lists li{
    list-style-type: none;
    width: inherit;
    height: inherit;
}
.photo-player-lists li img{
    width: 100%;
    height: 100%;
}
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .7s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>